<template>
    <div class="box_cont flex flex-column">
        <p class="title">个人中心</p>

        <div class="my_cont">
            <div class="row transition cur flex_center_between" @click="lookFn(1)">
                <span class="label">个人信息</span>
                <el-button type="primary" round>查看</el-button>
            </div>

            <div class="row transition cur flex_center_between" @click="lookFn(2)">
                <span class="label">我的词库</span>
                <el-button type="primary" round>查看</el-button>
            </div>

            <div class="row transition cur flex_center_between" @click="lookFn(3)">
                <span class="label">休息时间申请</span>
                <el-button type="primary" round>查看</el-button>
            </div>

            <div class="row transition cur flex_center_between" @click="lookFn(4)">
                <span class="label">我的词汇测试记录</span>
                <el-button type="primary" round>查看</el-button>
            </div>

            <div class="row transition cur flex_center_between" @click="myfn">
                <span class="label">我的推荐码</span>
                <span class="code tag-read cur">{{ userInfo ? userInfo.recommendCode : '' }}</span>
            </div>

            <div class="row transition cur flex_center_between" @click="lookFn(5)">
                <span class="label">修改密码</span>
                <el-button type="primary" round>查看</el-button>
            </div>

            <bear_dialogVue
                ref="bearDialog"
                :width="'65%'"
                :height="'70vh'"
                :isUserFooter="false"
                >
                <template #topControl>
                    <div class="blod" style="font-size: 2.6rem">个人信息 </div>
                </template>

                <teacherInfo type="1" :info="infoData" @closeFn="closeFn" />
            </bear_dialogVue>

            <bear_dialogVue
                ref="bear1Dialog"
                title="修改密码"
                :width="'35%'"
                :height="'60vh'"
                :closeCallBack="confirmFun"
            >
                <div class="pass_cont">
                    <p class="text">通过旧密码修改新的密码，修改完成后请妥善保管</p>
                    <p class="text1">当前已绑定：{{userInfo ? userInfo.mobile : ''}}</p>

                    <div class="flex_center">
                        <el-input placeholder="请输入旧密码" v-model="form.oldPassword" show-password>
                            <template #prefix>
                                <div class="flex_c_c h_full">
                                    <img src="@/assets/img/lock.png" alt="">
                                </div>
                            </template>
                        </el-input>
                    </div>

                    <div class="flex_center">
                        <el-input placeholder="请输入新密码" v-model="form.password" show-password>
                            <template #prefix>
                                <div class="flex_c_c h_full">
                                    <img src="@/assets/img/lock.png" alt="">
                                </div>
                            </template>
                        </el-input>
                    </div>

                    <div class="flex_center">
                        <el-input placeholder="请确认新密码" v-model="form.confirmPassword" show-password>
                            <template #prefix>
                                <div class="flex_c_c h_full">
                                    <img src="@/assets/img/lock.png" alt="">
                                </div>
                            </template>
                        </el-input>
                    </div>
                </div>
            </bear_dialogVue>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex';
import bear_dialogVue from '@/views/components/bear_dialog.vue'
import teacherInfo from '@/views/index/mine/info.vue'
import { changePassword } from '@/api/auth.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{
        bear_dialogVue,
        teacherInfo,
        bear_content
    },
    data() {
        return {
            key:'',
            infoData:{},
            input:'',
            form: {
                password: '',
                oldPassword: '',
                confirmPassword: ''
            },
            rules: {
                password: [
                    { required: true, message: '请输入新密码' },
                    { min: 6, max: 15, message: '密码为6-15位', trigger: 'blur' }
                ],
                oldPassword: [
                    { required: true, message: '请输入旧密码' },
                    { min: 6, max: 15, message: '密码为6-15位', trigger: 'blur' }
                ],
            }
        }
    },
    computed: {
      ...mapState({
          userInfo: state => state.user.userInfo
      })
    },
    created() {
        this.initUserInfo()
    },
    mounted() {

    },
    methods:{
        initUserInfo() {
            this.infoData = this.userInfo
            this.infoData.identity = 4
        },
        confirmFun(i) {
            if (i == 2) {
                return
            }else if (i == 1) {
                this.submit()
            }
        },
        async submit() {
            if (this.form.oldPassword == '') {
                this.$message.error('请输入旧密码')
                return false
            }
            if (this.form.password == '') {
                this.$message.error('请输入新密码')
                return false
            }
            if (this.form.confirmPassword == '') {
                this.$message.error('请确认新密码')
                return false
            }
            if (this.form.password != this.form.confirmPassword) {
                this.$message.error('两次密码不一致')
                return false
            }
            await changePassword(this.form).then(res => {
                if (res.error == 0) {
                    this.$message.success('修改密码成功')
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        lookFn(i){
            switch(i){
                case 1:
                    this.$refs.bearDialog.openDialog()
                    break;
                case 2:
                    this.$router.push('/test/mywords')
                    break;
                case 3:
                    this.$router.push('/rest/index')
                    break;
                case 4:
                    this.$router.push('/vocabulary/exam/list')
                    break;
                case 5:
                    this.$refs.bear1Dialog.openDialog()
                    break;
            }
        },
        closeFn(){
            this.$refs.bearDialog.closeDialog()
        },
        myfn(){
            if(this.userInfo){
                const oInput = document.createElement('input')
                oInput.value = this.userInfo.recommendCode
                document.body.appendChild(oInput)
                oInput.select()
                document.execCommand('Copy')
                this.$message({
                    message: '复制成功',
                    type: 'success'
                })
                oInput.remove()
            }
        }   
    }
}
</script>

<style lang="scss" scoped>
    .box_cont{
        width: 100%;
        height: 100%;

        .title{
            width: 100%;
            font-size: 2.4rem;
            color: #1A1A1A;
            text-align: left;
            padding: 3.2rem 0 2.4rem 3.2rem;
        }
    }
    .my_cont{
        flex: 1;
        .row{
            padding: 3rem 3.2rem 3rem;
            border-bottom: .1rem solid #F0F2F4;
            &:hover{background-color: #f8f8f8}
            .label{
                font-size: 2rem;
                font-size: 2rem;
                color: #3A3F5E;
            }
            .code{
                font-size: 3rem;
                font-size: 3rem;
                color: #F69B2C;
            }
        }

        overflow-y: auto;
        &::-webkit-scrollbar {
            width: .6rem;
            height: .1rem;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: .5rem;
            background-color:#019E69;
        }
        &::-webkit-scrollbar-track {
            background: #fff;
            border-radius: .5rem;
        }

    }
    .pass_cont{
        padding: 2.0rem;
        .flex_center{
            margin-bottom: 1.6rem;
            margin-bottom: 1.6rem;
            img{
                margin-right: 1.6rem;
                margin-right: 1.6rem;
            }
        }
        .text{
            font-size: 2.0rem;
            font-family: MicrosoftYaHei;
            color: #1A1A1A;
        }
        .text1{
            font-family: MicrosoftYaHei;
            font-size: 1.6rem;
            font-size: 1.6rem;
            font-weight: normal;
            color: #3A3F5E;
            margin: 2.0rem 0 3.8rem;
        }
    }
</style>
